<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <button class="btn">确定</button>
        <span>
            <a href="#" class="box">撩课</a>
        </span>
        <p class="lk">新的内容</p>
        <div>今天天气很好</div>
    </div>
    

    <script>
        //1、父子关系
        // let aBox = document.getElementsByClassName('box')[0];
        // console.log(aBox);
        // console.log(aBox.parentNode);//获取aBox的父节点

        //2、获取标签中的第一个子节点和最后一个子节点
        // let box = document.getElementById('box');
        // console.log(box.firstElementChild||box.firstChild);//获取标签中的第一个子节点
        // console.log(box.lastElementChild || box.lastChild);//获取标签中的最后一个子节点

        //3、获取所有的节点
        let box = document.getElementById('box');
        console.log(box.childNodes);//获取所有的节点，包括节点中的文本……
        console.log(box.children);//获取所有的元素节点
        //nodeType常用值1、元素:Element  2、属性:Attr 8、注释:Comment   3、元素或者属性中的文本内容:Text  9、整个文档:document 
        
    </script>
</body>
</html>